<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="/ncpsy/static/css/style.css">
    <title>终端管理</title>

    <style>
        .raw-text-container {
            /*margin: 10px 0;*/
            text-align: left;
            color: #333;
        }

        .layui-row {
            margin-top: 30px;
        }

        .test-test {
            padding: 10px 0;
        }

        .test-test > pre {
            outline: 1px solid #ccc;
            background: #f8f8f8;
            padding: 20px;
        }

        h2 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="page-header">
        <h1 class="title">终端管理</h1>
    </div>
    <div class="table-container">
        <div class="table-content">
            <div class="table-card-body">
                <div class="table-tools">
                    <button type="button" class="layui-btn getAllBtn">全部</button>
                    <button type="button" class="layui-btn getNOHandleBtn">待处理</button>
                    <button type="button" class="layui-btn getHandleBtn">已处理</button>
                </div>
                <table id="list" lay-skin="line" lay-filter="list" lay-data="{id: 'transportTable'}"></table>
            </div>
        </div>
    </div>

    <!--添加商品批次-->
    <div class="drawer-right new-goods-container">
        <div class="drawer-mask"></div>
        <div class="drawer-content-wrapper">
            <!--header-->
            <div class="ant-drawer-header">
                <div class="ant-drawer-title">添加商品批次</div>
                <button aria-label="Close" class="ant-drawer-close"><i aria-label="图标: close"
                                                                       class="anticon anticon-close">
                    <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em"
                         fill="currentColor" aria-hidden="true">
                        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                    </svg>
                </i></button>
            </div>
            <!--body-->
            <div class="ant-drawer-body">
                <form class="layui-form ant-form ant-form-horizontal">
                    <div class="layui-form-item">
                        <label class="layui-form-label">农产品名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">产地：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">品种：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">出厂日期：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">种植方式：</label>
                        <div class="layui-input-block">
                            <input type="textarea" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">导入溯源环节模板：</label>
                        <div class="layui-input-block">
                            <select class="selectTemplate" name="city" lay-verify="required">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </form>
            </div>
            <!--footer-->
            <div class="footer">
                <button type="button" class="layui-btn cancel-add-template layui-btn-primary"
                        style="margin-right: 8px;"><span>取 消</span>
                </button>
                <button type="button" class="layui-btn"><span>确 定</span></button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

<script>
    $(document).ready(function () {
        /*
        * 新建、查看、编辑模板页面操作
        * */
        $('body').on('click', '.ant-drawer-close', function () { // 关闭新建、编辑、查看模板
            $(this).parents('.drawer-right').fadeOut()
        })
            .on('click', '.cancel-add-template', function () { // 取消新建、编辑模板
                $(this).parents('.drawer-right').fadeOut()
            })
            .on('click', '.drawer-mask', function () { // 点击mask遮罩关闭右侧页面
                $(this).parents('.drawer-right').fadeOut()
            })
            .on('change', '.drawer-select', function () {
                console.log($(this).val())
            })
            .on('click', '.getAllBtn', async function () {
                _state = -1;
                await getTransportList(qyid, -1).then(data => {
                    ncpData = data
                }).catch(err => {
                    console.log(err)
                });
                updateNCPForm()
            })
            .on('click', '.getNOHandleBtn', async function () {
                _state = 0;
                await getTransportList(qyid, 0).then(data => {
                    ncpData = data
                }).catch(err => {
                    console.log(err)
                });
                updateNCPForm()
            })
            .on('click', '.getHandleBtn', async function () {
                _state = 1;
                await getTransportList(qyid, 1).then(data => {
                    ncpData = data
                }).catch(err => {
                    console.log(err)
                });
                updateNCPForm()
            });


        /*
        * 模板列表页面操作
        * */

        // 添加农产品批次
        $('.add-goods-btn').on('click', function () {
            showTemplate('.new-goods-container')
        });

    });

    // 显示添加面板
    function showTemplate(el) {
        $(el).fadeIn()
    }

    // 关闭模板
    function hideTemplate(el) {
        $(el).fadeOut()
    }

    // 动态添加下拉框
    const selectOptions = ['1', '2', '3', 4];
    renderSelectOptions(selectOptions);
    // 获取运输商列表
    // todo: 后台获取列表
    function renderSelectOptions(data) {
        if (!data || !data.length) {
            return false
        }
        const select = $('.selectTemplate');
        for (let i = 0, len = data.length; i < len; i++) {
            const $option = `<option value="` + data[i] + `">` + data[i] + `}</option>`;
            select.append($option)
        }
        return select
    }

    // 获取运输商的批次列表
    function getTransportList(qyid, state) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/queryNodeByQy/' + qyid + '/' + state + '/' + 3,
                type: 'get',
                contentType: 'application/json;charset=utf-8;',
                success: function (res) {
                    resolve(res.data);
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

    // 处理当前批次环节
    function handleTransport(nodeId) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: BASE_URL + '/updateNode/' + nodeId,
                type: 'post',
                contentType: 'application/json;charset=utf-8;',
                success: function (res) {
                    resolve(res.data);
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

</script>

<script type="text/html" id="hasConfirm">
    <div class="layui-btn-container">
        {{# if(d.state == 0){ }}
        <button class="layui-btn layui-btn-sm" lay-event="detail">详情</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">确认</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>-->
        {{# }else if(d.state == 1) { }}
        <button class="layui-btn layui-btn-sm" lay-event="detail">详情</button>
        {{# } }}
    </div>
</script>

<script type="text/html" id="imgsTemplate">
    <div>
        {{# if(!d.traceability_state || !d.traceability_state.length){ }}
        无数据
        {{# } else { }}
        {{# layui.each(d.traceability_state, function(index, item){ }}
        {{# if (d.traceability_state && d.traceability_state.length) {}}
        <img class="cell-img" src="{{ d.imgSrc }}"/>
        {{# } }}
        {{# }); }}
        {{# }}}
    </div>
</script>

<script>


    var qyid = localStorage.getItem('qyid');
    const BASE_URL = '/ncpsy';
    var _state = -1;

    // 更新产品信息表
    function updateNCPForm() {
        tableNcp.reload({
            id: 'transportTable',
            data: ncpData
        });
    }

    let ncpData = [];

    let tableNcp;
    layui.use(['table', 'laypage', 'layer', 'laytpl'], async function () {
        var table = layui.table,
            laypage = layui.laypage,
            layer = layui.layer,
            laytpl = layui.laytpl;
        _state = -1;
        await getTransportList(qyid, -1).then(data => {
            ncpData = data
        }).catch(err => {
            console.log(err)
        });
        //渲染表格
        tableNcp = table.render({
            elem: '#list',
            id: 'transportTable',
            data: ncpData,
            skin: 'line',
            page: true,
            // toolbar: 'default',
            cols: [[
                {field: 'ncpid', title: '批次号', sort: true},
                {field: 'ncpmc', title: '农产品名称'},
                {field: 'cd', title: '产地'},
                {field: 'pz', title: '品种'},
                {field: 'ccrq', title: '出厂日期', sort: true},
                {field: 'zzfs', title: '种植方式'},
                /*        {field: 'traceability_state', title: '溯源状态', templet: '#imgsTemplate'},*/
                {field: 'lname', title: '当前环节'},
                {title: '操作', fixed: 'right', width: 150, align: 'left', toolbar: '#hasConfirm'}
            ]]
        });
        // 监听表格行的详情、编辑删除时间
        table.on('tool(list)', function (obj) {
            var data = obj.data;
            let layEvent = obj.event;
            if (layEvent === 'detail') { //查看
                window.open('/ncpsy/goodsDetail?ncpid=' + data.ncpid, '_self')
            } else if (layEvent === 'update') { //确认处理
                layer.confirm('确定处理吗？', function (index) {
                    layer.close(index);
                    handleTransport(data.nodeId).then(res => {
                        layer.msg('处理完成');
                        getTransportList(qyid, _state)
                    }).catch(err => {
                        layer.msg('处理失败')
                    })
                });
            }
        });


        function promptMsg() {
            layer.msg('同上', {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function () {
                //do something
            });

        }
    })


</script>
</body>
</html>
